<template>
    <div class="app-container">
        <!-- 搜索栏 -->
        <el-form :model="queryParams" :inline="true">
            <el-form-item label="管理员昵称">
                <el-input @keyup.enter="handleQuery" v-model="queryParams.keyword" style="width: 200px"
                          placeholder="请输入管理员昵称"
                          clearable/>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
            </el-form-item>
        </el-form>
        <!-- 表格展示 -->
        <el-table border :data="adminList" v-loading="loading" height="500">
            <!-- 管理员头像 -->
            <el-table-column prop="avatar" label="头像" align="center" width="100">
                <template #default="scope">
                    <img :src="scope.row.avatar" width="40" height="40" alt="头像"/>
                </template>
            </el-table-column>
            <!-- 昵称 -->
            <el-table-column prop="nickname" label="昵称" align="center" width="140"></el-table-column>
            <!-- 管理员角色 -->
            <el-table-column prop="roleList" label="管理员角色" align="center">
                <template #default="scope">
                    <el-tag v-for="item in scope.row.roleList" :key="item.id" style="margin-right:4px;margin-top:4px">
                        {{ item.roleName }}
                    </el-tag>
                </template>
            </el-table-column>
            <!-- 状态 -->
            <el-table-column prop="status" label="状态" align="center" width="100">
                <template #default="scope">
                    <el-switch v-model="scope.row.isDisable" active-color="#13ce66" inactive-color="#ff4949"
                               :active-value="0"
                               :inactive-value="1" @change="handleChangeStatus(scope.row)"></el-switch>
                </template>
            </el-table-column>
            <!-- 登录ip -->
            <el-table-column prop="ipAddress" label="登录ip" align="center" width="140"></el-table-column>
            <!-- 登录地址 -->
            <el-table-column prop="ipSource" label="登录地址" align="center" width="140"></el-table-column>
            <!-- 创建时间 -->
            <el-table-column prop="createTime" label="创建时间" align="center" width="130">
                <template #default="scope">
                    <div class="create-time">
                        <el-icon>
                            <clock/>
                        </el-icon>
                        <span style="margin-left: 10px">{{ formatDate(scope.row.createTime) }}</span>
                    </div>
                </template>
            </el-table-column>
            <!-- 登录时间 -->
            <el-table-column prop="loginTime" label="登录时间" align="center" width="130">
                <template #default="scope">
                    <div class="create-time">
                        <el-icon>
                            <clock/>
                        </el-icon>
                        <span style="margin-left: 10px">{{ formatDate(scope.row.loginTime) }}</span>
                    </div>
                </template>
            </el-table-column>
            <!-- 操作 -->
            <el-table-column label="操作" align="center" width="100" fixed="right">
                <template #default="scope">
                    <el-button type="primary" icon="Edit" link @click="openModel(scope.row)">
                        编辑
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <pagination v-if="count > 0" :total="count" v-model:page="queryParams.pageNum"
                    v-model:limit="queryParams.pageSize"
                    @pagination="getList"/>
        <!-- 修改对话框 -->
        <el-dialog title="修改管理员" v-model="update" width="400px" append-to-body draggable center>
            <el-form ref="adminFormRef" label-width="100px" :model="adminForm" :rules="rules">
                <el-form-item label="昵称" prop="nickname">
                    <el-input placeholder="请输入昵称" v-model="adminForm.nickname" style="width: 250px;"/>
                </el-form-item>
                <el-form-item label="角色" prop="roleIdList">
                    <el-checkbox-group v-model="roleIdList">
                        <el-checkbox v-for="item in adminRoleList" :key="item.id" :label="item.id">
                            {{ item.roleName }}
                        </el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="submitForm">确 定</el-button>
                    <el-button @click="update = false">取 消</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import {getAdminList, getAdminRoleList, updateAdmin, updateAdminStatus} from '@/api/admin';
import {Admin, AdminForm, AdminQuery, AdminRole} from '@/api/admin/types';
import {formatDate} from "@/utils/date";
import {messageConfirm, notifySuccess} from '@/utils/modal';
import {FormInstance, FormRules} from 'element-plus';
import {onMounted, reactive, ref, toRefs} from 'vue';

const adminFormRef = ref<FormInstance>();
const rules = reactive<FormRules>({
    nickname: [{required: true, message: "请输入昵称", trigger: "blur"}],
    roleIdList: [{required: true, message: "角色不能为空", trigger: "click"}]
});
const data = reactive({
    count: 0,
    update: false,
    loading: false,
    queryParams: {
        pageNum: 1,
        pageSize: 10,
    } as AdminQuery,
    adminList: [] as Admin[],
    adminForm: {} as AdminForm,
    adminRoleList: [] as AdminRole[],
    roleIdList: [] as string[],
});
const {count, update, loading, queryParams, adminList, adminForm, adminRoleList, roleIdList} = toRefs(data);
const openModel = (admin: Admin) => {
    roleIdList.value = [];
    adminForm.value.id = admin.id;
    adminForm.value.nickname = admin.nickname;
    admin.roleList.forEach(item => {
        roleIdList.value.push(item.id);
    });
    adminFormRef.value?.clearValidate();
    update.value = true;
};
const handleChangeStatus = (admin: Admin) => {
    let text = admin.isDisable === 0 ? "解封" : "封禁";
    messageConfirm("确定要" + text + admin.nickname + "吗?").then(() => {
        updateAdminStatus({id: admin.id, isDisable: admin.isDisable}).then(({data}) => {
            if (data.flag) {
                notifySuccess(data.msg);
            } else {
                admin.isDisable = admin.isDisable === 0 ? 1 : 0;
            }
        })
    }).catch(() => {
        admin.isDisable = admin.isDisable === 0 ? 1 : 0;
    });
};
const submitForm = () => {
    adminForm.value.roleIdList = roleIdList.value;
    adminFormRef.value?.validate((valid) => {
        if (valid) {
            updateAdmin(adminForm.value).then(({data}) => {
                if (data.flag) {
                    notifySuccess(data.msg);
                    getList();
                }
                update.value = false;
            })
        }
    })
};
const getList = () => {
    loading.value = true;
    getAdminList(queryParams.value).then(({data}) => {
        adminList.value = data.rows;
        count.value = data.total;
        loading.value = false;
    })
};
const handleQuery = () => {
    queryParams.value.pageNum = 1;
    getList();
};
onMounted(() => {
    getList();
    getAdminRoleList().then(({data}) => {
        adminRoleList.value = data.data;
    })
});
</script>

<style scoped></style>
